<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>基本列表</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
		想要对数据加工后再展示，且不想破坏原数据，最好用计算属性。
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>人员列表</h2>
		<input v-model="keyWord" type="text" placeholder="请输入姓名">
		<ul>
			<li v-for="(p,index) in fmtPersons" :key="p.id">
				{{p.name}}--{{p.sex}}--{{p.age}}岁
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		new Vue({
			el: '#root',
			data: {
				keyWord: '',
				persons: [{
						id: '001',
						name: '马冬梅',
						age: 35,
						sex: '女'
					},
					{
						id: '002',
						name: '周冬雨',
						age: 20,
						sex: '女'
					},
					{
						id: '003',
						name: '周杰伦',
						age: 41,
						sex: '男'
					},
					{
						id: '004',
						name: '温兆伦',
						age: 25,
						sex: '男'
					},
				]
			},

			//使用computed过滤，优势：不影响原数据
			computed: {
				fmtPersons() {
					const {
						persons,
						keyWord
					} = this
					return persons.filter(p => p.name.indexOf(keyWord) !== -1)
				}
			}

			//在watch修改原数据，会导致原数据的丢失
			/* watch:{
				keyWord(value){
					const arr = this.persons.filter( p => p.name.indexOf(value) !== -1)
					this.persons = arr
				}
			} */
		})
	</script>
</body>

</html>